<!-- 登录页面组件 -->
<template>
	<view class="login-view">
		
		  <!-- #ifdef H5 -->
		   <img class="icon" :src="icon" :style="{'margin-bottom':iconBottom,'width':iconWidth,'height':iconHeight}"></img>
		  <!-- #endif -->
		  <!-- #ifdef MP -->
		   <image class="icon" :src="icon" :style="{'margin-bottom':iconBottom,'width':iconWidth,'height':iconHeight}"></image>
		  <!-- #endif -->
		   <!-- <rich-text class="name" :nodes="name"></rich-text> -->
		   <text class="name">{{name}}</text>
		   <view class="login-tools" v-if="!userInfo || loginInfo.token == ''">
			   <login-btn class="btn btn-yellow login-view-btn" @login-success="loginSuccess">
			   	登录
			   </login-btn>
			   <text class="text">同意微信授权，登录小程序</text>
			   
		   </view>
		  <view class="getPhone-tools" v-else>
		
		  <!-- <rich-text class="text" :nodes="text"></rich-text> -->
		     <button v-if="loginInfo.phone == ''" class="btn btn-yellow login-view-btn" @click="getPhonePopShow = true">绑定手机</button>
		     <text class="text">授权获取手机号码，绑定手机</text>
		  </view>
		<getPhonePop :show.sync="getPhonePopShow"></getPhonePop>
	</view>
</template>

<script>
	import loginBtn from "../login-btn/login-btn.vue"
	import getPhonePop from '@/components/get-phone-pop/get-phone-pop';
	export default {
		components:{
			loginBtn,
			getPhonePop
		},
		props:{
			
			icon: {
				//图标地址 或 文字图标类名
				type: String,
				default: '../../static/img_login-view.png'
			},
			iconW:{
				// 图标宽度大小
				type: Number|String,
				default: 100
			}
			,
			iconH:{
				// 图标高度大小
				type: Number|String,
				default: 100
			}
			,
			iconBottom:{
				// 图标 bottom 下边外边距
				type:String,
				default:'40rpx'
			},
			name: {
				//名称
				type: String,
				default: '无数据'
			},
			// btnText: {
			// 	//图标地址 或 文字图标类名
			// 	ype: String,
			// 	default: '刷新'
			// },
			// text: {
			// 	//提示文本
			// 	type: String,
			// 	default: '无数据'
			// },
		},
		data() {
			return {
				getPhonePopShow: false, //获取电话弹窗显示
			};
		},
		computed:{
			iconWidth(){
				if(typeof this.iconW=="string")
				return this.iconW
				else
				return this.iconW+"rpx"
			},
			iconHeight(){
				if(typeof this.iconH=="string")
				return this.iconH
				else
				return this.iconH+"rpx"
			},
			isLogin() {
				return this.$store.state.loginModule.token && this.$store.state.loginModule.token != '';
			},
			loginInfo() {
				// 登录信息
				return this.$store.state.loginModule;
			},
			userInfo() {
				// 用户信息
				return this.$store.state.userModule.userInfo;
			},
		},
		methods:{
			
			loginSuccess(data) {
				// 登录成功
				if (data.jpUser.mobile == '') {
					// 未绑定手机
					this.getPhonePopShow = true;
				}
			},
		}
	}
</script>

<style lang="scss">
	.login-view{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		position: relative;
		
		.login-tools{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			margin-top: 80rpx;
		}
		
		.getPhone-tools{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
				margin-top: 80rpx;
		}
		
			.icon{
				width: 50rpx;
				height: 50rpx;
			}
			.name{
				font-size: 36rpx;
				font-weight: bolder;
				color: #000;
				text-align: center;
			}
			.login-view-btn{
				margin-top: 30rpx;
				
				width: 60%;
				text-align: center;
				padding: 0rpx;
				border-radius: 6px;
				display: flex;
				justify-content: center;
				align-items: center;
				::v-deep button{
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					width: 100%;
					height: 100%;
					text-align: center;
					padding: 10rpx 0rpx;
					font-size: 34rpx;
				}
				
			}
		
		
		.text{
			margin-top: 20rpx;
			color: #A4A6A7;
			font-size: 34rpx;
		}
		
	}
</style>
